<template>
  <div class="btn p-10px box-border text-sm rounded bg-blue-600 text-light-50 cursor-pointer"
       @click="modalShow = true">
    创建团队
  </div>
  <n-modal v-model:show="modalShow">
    <n-card style="width: 600px">
      <template #header>
        <div class="text-base">创建团队</div>
      </template>
      <div>
        <div class="mb-10px">
          <n-input v-model:value="groupName" placeholder="请输入团队名称"/>
        </div>
        <div class="mb-10px">
          <n-input v-model:value="groupDesc" placeholder="请输入团队简介(可选)"/>
        </div>
      </div>
      <template #action>
        <div class="center~">
          <div class="mr-10px">
            <n-button type="info" @click="onSubmit">确认</n-button>
          </div>
          <n-button type="error" @click="onCancel">取消</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import {useBaseStore} from "@/store/base";
import {useCreateGroup} from "@/pages/group/hooks/use-create-group";
import {NButton, NCard, NInput, NModal, useMessage} from "naive-ui"

export default defineComponent({
  components: {NModal, NInput, NButton, NCard},
  emits: ["success"],
  setup(props, {emit}) {
    const message = useMessage()
    const baseStore = useBaseStore()
    const modalShow = ref(false)
    const groupName = ref("")
    const groupDesc = ref("")

    async function onSubmit() {
      const result = await useCreateGroup(baseStore.userId, groupName.value, groupDesc.value, "2.jpg")
      if (result.code !== 1000) {
        message.error("创建团队失败")
      } else {
        message.success("创建团队成功")
        modalShow.value = false
        emit("success")
      }
      groupName.value = ""
      groupDesc.value = ""
    }

    function onCancel() {
      groupName.value = ""
      groupDesc.value = ""
      modalShow.value = false
    }

    return {
      modalShow,
      groupName,
      groupDesc,
      onSubmit,
      onCancel
    }
  }
})
</script>

<style scoped>
.btn {
  width: fit-content;
}
</style>